<template>
  <div class="song">
    <!-- 轮播图 -->
    <el-carousel height="445px">
      <el-carousel-item v-for="item in banners" :key="item.id">
        <img :src="item.imageUrl" />
      </el-carousel-item>
    </el-carousel>
    <div class="songList">
      <!-- 精选歌单 -->
      <div class="handpick">
        <div class="handpickTitle">
          <p class="songTitle"><b>精选</b>歌单</p>
          <h3 class="more"><router-link to="/playlist">更多</router-link></h3>
        </div>
        <div class="handpickCon">
          <div class="handpickBig">
            <p class="bigImg">
              <i class="icon el-icon-headset"></i>
              <span class="ic onText">0.1万</span>
            </p>
            <img  @click="toPlaylist" class="picLeft" src="../../../static/images/1.jpg" alt="" />
            <div class="handpickText">
              <p class="songName">乡村之旅：安静惬意，与自然同在</p>
              <p class="singer">蔓若</p>
            </div>
          </div>

          <div class="handpickRight">
            <div class="picItem" v-for="item in recommendList" :key="item.id">
              <p class="iconfont">
                <i class="icon el-icon-headset"></i>
                <span>0.1万</span>
              </p>
              <a class="picItemImg" @click="toPlaylist"><img :src="item.picUrl" alt="" /> </a>
              <div class="recommendText">
                <p class="songName">{{ item.name }}</p>
                <p class="singer">好歌种草机</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 热门榜单 -->
      <div class="hot" @click="toRanking">
        <div class="hotTitle">
          <p class="songTitle"><b>热门</b>榜单</p>
          <h3 class="more"><router-link to="/ranking">更多</router-link></h3>
        </div>
        <div class="hotCon">
          <div class="hotItem">
            <img src="../../../static/images/2.jpg" alt="" />
            <div class="hotList">
              <dl>
                <dt>酷狗飙升榜</dt>
                <dd v-for="(item, index) in musicList" :key="index">
                  {{ index + 1 }}.{{ item.name }}
                </dd>
              </dl>
              <a href=""><span class="icon el-icon-arrow-right"></span></a>
            </div>
          </div>
          <div class="hotItem">
            <img src="../../../static/images/3.jpg" alt="" />
            <div class="hotList">
              <dl>
                <dt>酷狗TOP500</dt>
                <dd v-for="(item, index) in musicList1" :key="index">
                  {{ index + 1 }}.{{ item.name }}
                </dd>
              </dl>
              <a href=""><span class="icon el-icon-arrow-right"></span></a>
            </div>
          </div>
          <div class="hotItem">
            <img src="../../../static/images/4.jpg" alt="" />
            <div class="hotList">
              <dl>
                <dt>网络红歌榜</dt>
                <dd v-for="(item, index) in musicList2" :key="index">
                  {{ index + 1 }}.{{ item.name }}
                </dd>
              </dl>
              <a href=""><span class="icon el-icon-arrow-right"></span></a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="gamePic">
      <img src="../../../static/images/5.jpg" alt="" />
    </div>

    <div class="songType">
      <!-- 新歌首发 -->
      <div class="newSong">
        <div class="newSongTitle">
          <h3 class="songTitle"><b>新歌</b>首发</h3>
          <div class="country">
            <span class="littleTitle" @click="changeCountry(1)">华语</span>
            <span class="littleTitle" @click="changeCountry(2)">欧美</span>
            <span class="littleTitle" @click="changeCountry(3)">韩国</span>
            <span class="littleTitle" @click="changeCountry(4)">日本</span>
          </div>
          <el-button class="icon el-icon-video-play" plain>
            全部播放
          </el-button>
        </div>
        <div class="newSongList">
          <div v-show="isShowList === 1" class="China" id="1">
            <ul>
              <!-- <router-link to="/musicplay"> -->
              <li
                class="newSongLi"
                :class="musicIndex === 0 ? 'active' : ''"
                @mouseenter="enter"
                @mouseleave="leave"
                @click="toMusicPlay(item.id)"
                v-for="(item, index) in ChinaList"
                :key="index"
              >
                <a href="">
                  <span class="newSongName">{{ item.name }}</span>
                  <div
                    :class="
                      musicIndex === index ? 'display:block' : 'display:none'
                    "
                  >
                    <span class="icon-play el-icon-video-play"></span>
                    <span class="icon-download el-icon-download"></span>
                  </div>
                  <span class="newSongNum">{{ getMusicNum(item.dt) }}</span>
                </a>
              </li>
              <!-- </router-link> -->
            </ul>
          </div>
          <div v-show="isShowList === 2" class="USA" id="2">
            <ul>
              <li
                class="newSongLi"
                @mouseenter="enter"
                @mouseleave="leave"
                @click="toMusicPlay(item.id)"
                v-for="item in USAList"
                :key="item.id"
              >
                <a href="">
                  <span class="newSongName">{{ item.name }}</span>
                  <div>
                    <span class="icon-play el-icon-video-play"></span>
                    <span class="icon-download el-icon-download"></span>
                  </div>
                  <span class="newSongNum">{{ getMusicNum(item.dt) }}</span>
                </a>
              </li>
            </ul>
          </div>
          <div v-show="isShowList === 3" class="Korea" id="3">
            <ul>
              <li
                class="newSongLi"
                @mouseenter="enter"
                @mouseleave="leave"
                @click="toMusicPlay(item.id)"
                v-for="item in KoreaList"
                :key="item.id"
              >
                <a href="">
                  <span class="newSongName">{{ item.name }}</span>
                  <div>
                    <span class="icon-play el-icon-video-play"></span>
                    <span class="icon-download el-icon-download"></span>
                  </div>
                  <span class="newSongNum">{{ getMusicNum(item.dt) }}</span>
                </a>
              </li>
            </ul>
          </div>

          <div v-show="isShowList === 4" class="Japan" id="4">
            <ul>
              <li
                class="newSongLi"
                @mouseenter="enter"
                @mouseleave="leave"
                @click="toMusicPlay(item.id)"
                v-for="item in JapanList"
                :key="item.id"
              >
                <a href="">
                  <span class="newSongName">{{ item.name }}</span>
                  <div>
                    <span class="icon-play el-icon-video-play"></span>
                    <span class="icon-download el-icon-download"></span>
                  </div>
                  <span class="newSongNum">{{ getMusicNum(item.dt) }}</span>
                </a>
              </li>
            </ul>
          </div>

          <!-- 新歌首发分页 -->
          <!-- <div class="page">
            <a href=""><span class="icon el-icon-arrow-left"></span></a>
            <span class="firstPagePage">1 / </span>
            <span class="allPage">3</span>
            <a href=""><span class="icon el-icon-arrow-right"></span></a>
          </div> -->
        </div>
      </div>

      <!-- 推荐 MV -->
      <div class="recommend">
        <div class="recommendTitle">
          <h3 class="songTitle"><b>推荐</b>MV</h3>
          <h3 class="more"><router-link to="/mv">更多</router-link></h3>
        </div>
        <div class="recommendPic" @click="toMvweb">
          <div class="recommendCon">
            <img
              class="recommendContainer"
              src="../../../static/images/6.jpg"
              alt=""
            />
            <div class="recommendText">
              <p>等风雨经过(《中国医生》电影片尾曲)</p>
              <p>张学友</p>
            </div>
          </div>
          <div class="recommendDown" v-for="item in MvWebList" :key="item.id">
            <img class="recommemdImg" :src="item.picUrl" alt="" />
            <div class="recommendDownText">
              <p class="songName">{{ item.name }}</p>
              <p class="singer">{{ item.artistName }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="gamePic">
      <img src="../../../static/images/5.jpg" alt="" />
    </div>
  </div>
</template>

<script>
// import moment from "moment";
import {
  reqGetMusic,
  reqRecommend,
  reqNewSong,
  reqMv,
  reqMvUrl,
} from "../../utils/request";
import { gfRequest } from "../../utils/gfRequest";

export default {
  name: "Handpick",
  data() {
    return {
      // isShow: false,
      isShowList: 1,
      musicList: [],
      musicList1: [],
      musicList2: [],
      recommendList: [],
      ChinaList: [],
      USAList: [],
      KoreaList: [],
      JapanList: [],
      MvWebList: [],
      // durationTime: "",
      musicIndex: 0,
      urlTo: "",
      mvName: "",
      banners: [],
    };
  },
  methods: {
    enter(index) {
      // console.log("enter");
      this.musicIndex = index;
      // if (this.musicIndex) {
      //   this.isShow = true;
      // }
    },
    leave() {
      this.isShow = false;
    },
    changeCountry(id) {
      // this.isShowList = !isShowList;
      this.isShowList = id;
    },
    getMusicNum(value) {
      let min = Math.floor(value / 1000 / 60);
      let sec = Math.floor((value / 1000) % 60);
      if (min < 10) {
        min = "0" + min;
      }
      if (sec < 10) {
        sec = "0" + sec;
      }
      return min + ":" + sec;
    },

    toMusicPlay(id) {
      console.log("111");
      this.$router.push(`/musicplayer?id=${id}`);
    },
    toPlaylist() {
      console.log('toPlaylist');
      // this.$router.push(`/musicplayer?id=${id}`);
      this.$router.push('/playlist');
    },
    toRanking() {
      this.$router.push("/ranking");
    },
    async toMvweb() {
      // 推荐 MV
      const resMvList = await reqMv("/personalized/mv");
      const index = Math.floor(Math.random() * 2);
      const mvName = resMvList.data.result.slice(0, 2)[index].name;

      // 获取 MV url
      const id = resMvList.data.result.map((item) => item.id);
      const index1 = Math.floor(Math.random() * 3) + 1;
      const resUrl = await reqMvUrl(`/mv/url?id=${id[index1]}`);
      const urlTo = resUrl.data.data.url;

      console.log("urlTo--mvName ", urlTo, mvName);
      // window.open(urlTo);
      this.$router.push({
        name: "MvPlayer",
        query: { url: urlTo, name: mvName },
      });
    },

    // toMvWeb(id) {
    //   this.$router.push(`/mvweb?id=${id}`);
    // },
  },
  async mounted() {
    // 热门歌单
    const res = await reqGetMusic("/top/list?idx=3");
    // console.log(res);
    this.musicList = res.data.playlist.tracks.slice(0, 2);
    this.musicList1 = res.data.playlist.tracks.slice(2, 4);
    this.musicList2 = res.data.playlist.tracks.slice(4, 6);

    // 新歌首发
    const resNew = await reqNewSong("/top/list?idx=3");
    // console.log(resNew);
    // 华语歌单
    this.ChinaList = resNew.data.playlist.tracks.slice(6, 15);
    // console.log(this.ChinaList);
    // const durationTime = moment(this.ChinaList[0].dt).format("mm:ss");
    // console.log(durationTime);
    // this.durationTime = durationTime;
    // 欧美歌单
    this.USAList = resNew.data.playlist.tracks.slice(15, 24);
    // 韩国歌单
    this.KoreaList = resNew.data.playlist.tracks.slice(24, 33);
    // 日本歌单
    this.JapanList = resNew.data.playlist.tracks.slice(33, 42);

    // 精选歌单
    const resRecomList = await reqRecommend("/personalized");
    // console.log(resRecomList);
    this.recommendList = resRecomList.data.result.slice(0, 4);

    // 推荐 MV
    const resMvList = await reqMv("/personalized/mv");
    this.MvWebList = resMvList.data.result.slice(0, 2);
    // const index = Math.floor(Math.random() * 2);
    // this.mvName = this.MvWebList[index].name;

    const response = await gfRequest("/banner");
    this.banners = response.data.banners;
  },
};
</script>

<style>
html,
body,
div {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
ul {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
  margin: 0;
  cursor: pointer;
}
.littleTitle,
.picLeft,
.hotItem,
.recommendCon,
.recommendDown,
.picItemImg {
  cursor: pointer;
}
/* 轮播图 */
.el-carousel__item img {
  width: 100%;
}
/* 精选歌单 */
.songList {
  display: flex;
  justify-content: center;
  align-items: center;
}

.songList .handpick {
  width: 660px;
}

.songList .handpickTitle {
  color: #555;
  display: flex;
  width: 655px;
  /* background-color: aqua; */
  justify-content: space-between;
  align-items: center;
}

.songList .songTitle {
  font-size: 30px;
  color: #555;
  font-weight: normal;
}
.song b {
  font-weight: normal;
  color: #009af3;
}

.songList .more a {
  color: #ccc;
}

.songList .handpick .handpickCon .handpickBig {
  position: relative;
}

.songList .handpick .handpickCon .bigImg {
  color: #fff;
  position: absolute;
  top: -12px;
  right: 337px;
  /* background-image: url("https://staticssl.kugou.com/public/root/images/cptTBg.png"); */
}
.songList .handpick .handpickCon .handpickBig .handpickText {
  position: absolute;
  color: #fff;
  top: 275px;
  width: 320px;
  height: 50px;
  padding-left: 5px;
  background: rgba(0, 0, 0, 0.5);
  /* border: 1px solid blue; */
}

.songList .handpick .handpickCon .handpickBig .handpickText p {
  padding-top: 5px;
}

.songList .handpick .handpickCon .bigImg .icon {
  padding-right: 5px;
}

.songList .handpick .handpickCon .iconfont {
  color: #fff;
}
.songList .handpick .handpickCon .iconfont .icon {
  padding-right: 5px;
}

.songList .handpick .handpickCon .picLeft {
  width: 325px;
  height: 325px;
  float: left;
  /* margin-right: 5px; */
}

.songList .handpick .handpickCon .handpickRight {
  /* border: 1px solid blue; */
  display: flex;
  flex-wrap: wrap;
  width: 330px;
  height: 330px;
}
.songList .handpick .handpickCon .handpickRight .picItem {
  position: relative;
}

.songList .handpick .handpickCon .handpickRight .recommendText {
  position: absolute;
  bottom: 5px;
  left: 5px;
  color: #fff;
  font-size: 14px;
  width: 160px;
  height: 50px;
  background: rgba(0, 0, 0, 0.5);
}

.songList .handpick .handpickCon .handpickRight .recommendText p {
  padding-left: 5px;
  padding-top: 5px;
}

.songList .handpick .handpickCon .picItem {
  position: relative;
}

.songList .handpick .handpickCon .iconfont {
  position: absolute;
  /* border: 1px solid blue; */
  top: 0;
  right: 0px;
  width: 152px;
  height: 30px;
  line-height: 30px;
  text-align: right;
  margin: 0;
  background-image: url("https://staticssl.kugou.com/public/root/images/cptTBg.png");
}

.songList .handpick .handpickCon .picItem img {
  width: 160px;
  height: 160px;
  margin-left: 5px;
}

.songList .handpick .singer {
  color: #fff;
}

/* 热门榜单 */
.songList .hot {
  margin-left: 20px;
  width: 320px;
  /* height: 325px; */
  /* border: 1px solid blue; */
}

.songList .hot .hotTitle {
  /* margin-top: 5px; */
  /* height: 100px; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hot .hotCon .hotItem {
  margin-bottom: 15px;
  background-color: #f6f6f6;
  display: flex;
}

.hot .hotCon .hotItem img {
  width: 98px;
  height: 98px;
  /* float: left; */
}

.hot .hotCon .hotItem .hotList {
  width: 200px;
  height: 68px;
  padding: 15px 10px;
  font-size: 14px;
  position: relative;
}

.hot .hotCon .hotItem .hotList .icon {
  position: absolute;
  top: 50%;
  right: 10px;
}

.hot .hotCon .hotItem .hotList dt {
  font-weight: bold;
}

.hot .hotCon .hotItem .hotList dd {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* .song {
  height: 2000px;
} */
.song .gamePic {
  width: 1000px;
  margin: 30px auto;
}

/* 新歌首发 */
.songType {
  display: flex;
  justify-content: center;
  align-items: center;
  /* height: 375px; */
}

/* .songType .newSong { */
/* width: 650px; */
/* height: 375px; */
/* border: 1px solid blue; */
/* } */

.songType .newSong .newSongTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px;
  padding-bottom: 20px;
  margin-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.songType .newSong .newSongTitle .country {
  width: 185px;
  /* border: 1px solid blue; */
  line-height: 30px;
  display: flex;
  justify-content: space-around;
  margin-left: -200px;
}

.songType .newSong .newSongTitle .songTitle {
  font-size: 30px;
  color: #555;
  font-weight: normal;
}

.songType .newSong .newSongList {
  display: flex;
  flex-direction: column;
}
.songType .newSong .newSongList ul {
  /* border: 1px solid blue; */
  height: 300px;
}

.songType .newSong .newSongList .playDown {
  display: none;
}

.songType .newSong .newSongList .page {
  /* border: 1px solid #009af3; */
  height: 20px;
  text-align: center;
}

.songType .newSong .newSongList .newSongLi {
  width: 630px;
  height: 35px;
  padding-left: 10px;
  display: flex;
  position: relative;
}

.songType .newSong .newSongList .newSongLi .icon-play {
  position: absolute;
  right: 70px;
  top: 3px;
}

.songType .newSong .newSongList .newSongLi .icon-download {
  position: absolute;
  right: 50px;
  top: 3px;
}

.songType .newSong .newSongList .newSongLi .newSongName {
  position: absolute;
}
.songType .newSong .newSongList .newSongLi .newSongNum {
  position: absolute;
  right: 0;
}

.songType .newSong .newSongList .newSongLi a {
  color: #333;
  font-size: 13px;
}

/* 推荐 MV */
.songType .recommend {
  width: 320px;
  /* border: 1px solid blue; */
  margin-left: 20px;
}

.recommend .recommendTitle {
  position: relative;
  color: #555;
  font-size: 30px;
  /* border: 1px solid blue; */
}

.recommend .recommendTitle .songTitle {
  position: absolute;
  top: -70px;
  font-weight: normal;
}

.recommend .recommendTitle .more a {
  position: absolute;
  top: -20px;
  right: 0px;
  color: #ccc;
  font-size: 16px;
}

.recommend .recommendPic {
  padding-top: 20px;
  height: 315px;
  border: 1px solid #fff;
}

.recommend .recommendPic .recommendCon {
  margin-bottom: 10px;
}

.recommend .recommendPic .recommendContainer {
  position: relative;
  width: 320px;
  height: 175px;
}
.recommend .recommendPic .recommendText {
  position: absolute;
  margin-top: -54px;
  z-index: 2;
  width: 320px;
  height: 50px;
  background: rgba(0, 0, 0, 0.5);
}
.recommend .recommendPic p {
  font-size: 16px;
  margin: 0;
  padding-left: 5px;
}
.recommend .recommendPic .recommendCon p {
  color: #fff;
}

.recommend .recommendPic .recommendDown {
  float: left;
  width: 154px;
  height: 125px;
  margin-right: 5px;
}

.recommend .recommendPic .recommendDown .recommemdImg {
  width: 154px;
  height: 84px;
}
.song .songName,
.singer {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.song .singer {
  font-size: 12px;
  color: rgb(105, 102, 102);
  margin: 0;
}
</style>